<template>
  <view class="add_block">
    <uni-forms
      ref="form"
      :modelValue="formData"
      class="add_form"
      validate-trigger="bind"
      label-position="top"
    >
      <!-- 选择周期 -->
      <uni-forms-item
        name="cycle"
        label="周期: "
        required
        style="font-size: 28rpx"
      >
        <uni-easyinput
          type="text"
          v-model="formData.cycle"
          placeholder="请输入周期"
          name="cycle"
        />
      </uni-forms-item>
      <!-- 旅游爱好 -->
      <uni-forms-item name="hobby" label="爱好: " required>
        <uni-data-checkbox
          mode="button"
          v-model="formData.hobby"
          :localdata="hobby"
          multiple
        >
        </uni-data-checkbox>
      </uni-forms-item>
      <!-- 洲 -->
      <uni-forms-item
        name="zhou"
        label="洲: "
        required
        style="font-size: 28rpx"
      >
        <uni-combox
          :candidates="zhou"
          placeholder="请选择洲"
          name="zhou"
          v-model="formData.zhou"
        ></uni-combox>
      </uni-forms-item>
      <!-- 选择国家 -->
      <uni-forms-item
        name="country"
        label="国家: "
        required
        style="font-size: 28rpx"
      >
        <uni-easyinput
          type="text"
          v-model="formData.country"
          placeholder="请输入国家"
          name="country"
        />
      </uni-forms-item>
      <!-- 选择城市 -->
      <uni-forms-item name="city" label="城市: " style="font-size: 28rpx">
        <uni-easyinput
          type="text"
          v-model="formData.city"
          placeholder="请输入城市(可多填,非必填)"
          name="city"
        />
      </uni-forms-item>
      <!-- 预算 -->
      <uni-forms-item
        name="money"
        required
        label="预算: "
        style="font-size: 28rpx"
      >
        <uni-easyinput
          type="text"
          v-model="formData.money"
          placeholder="请输入您的预算"
          name="money"
        />
      </uni-forms-item>
      <!-- 出发日期 -->
      <uni-forms-item
        name="startDate"
        required
        label="出发日期: "
        style="font-size: 28rpx"
      >
        <uni-datetime-picker
          type="date"
          :clear-icon="false"
          v-model="formData.startDate"
        />
      </uni-forms-item>
      <!-- 出发城市 -->
      <uni-forms-item
        name="startCity"
        required
        label="出发城市: "
        style="font-size: 28rpx"
      >
        <uni-easyinput
          type="text"
          v-model="formData.startCity"
          placeholder="请输入您的出发城市"
          name="startCity"
        />
      </uni-forms-item>
    </uni-forms>
    <button @click="submit" size="mini" style="margin-bottom: 40rpx">
      提交
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hobby: [
        {
          text: "风光休闲",
          value: 0,
        },
        {
          text: "蜜月旅行",
          value: 1,
        },
        {
          text: "光影拍摄",
          value: 2,
        },
        {
          text: "购物享受",
          value: 3,
        },
        {
          text: "亲子度假",
          value: 4,
        },
        {
          text: "美食盛宴",
          value: 5,
        },
        {
          text: "人文历史",
          value: 6,
        },
        {
          text: "旅拍婚纱",
          value: 7,
        },
      ],
      zhou: ["亚洲", "欧洲", "北美洲", "南美洲", "大洋洲", "非洲"],
			// 表单数据
      formData: {
        cycle: 0,
        hobby: "",
        zhou: "",
        country: "",
        city: "",
        money: 0,
        startDate: "",
        startCity: "",
      },
			// 规则
      rules: {
        cycle: {
          rules: [
            {
              required: true,
              errorMessage: "请输入周期",
            },
            {
              format: "number",
              errorMessage: "必须为数字值",
            },
            {
              minimum: 2,
              maximum: 20,
              errorMessage: "周期在{minimum}到{maximum}天",
            },
          ],
        },
        hobby: {
          rules: [
            {
              required: true,
              errorMessage: "请选择兴趣",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value.length < 2 || value == "") {
                  callback("请至少勾选两个兴趣爱好");
                }
                return true;
              },
            },
          ],
        },
        zhou: {
          rules: [
            {
              required: true,
              errorMessage: "请输入(比如：亚洲)",
            },
            {
              pattern: "^[\\u4e00-\\u9fa5]+$",
              errorMessage: "请输入中文",
            },
          ],
        },
        country: {
          rules: [
            {
              required: true,
              errorMessage: "请输入国家(比如：泰国)",
            },
            {
              pattern: "^[\\u4e00-\\u9fa5]+$",
              errorMessage: "请输入中文",
            },
          ],
        },
        money: {
          rules: [
            {
              required: true,
              errorMessage: "请输入您的预算",
            },
            {
              format: "number",
              errorMessage: "必须为数字值",
            },
          ],
        },
        startCity: {
          rules: [
            {
              required: true,
              errorMessage: "请输入出发城市",
            },
            {
              pattern: "^[\\u4e00-\\u9fa5]+$",
              errorMessage: "请输入中文",
            },
          ],
        },
        startDate: {
          rules: [
            {
              required: true,
              errorMessage: "请选择出发时间",
            },
            {
              validateFunction: function (value) {
                if (value == "") {
                  return false;
                }
                return true;
              },
            },
          ],
        },
      },
    };
  },
	// 需要在onReady中设置规则  自定义校验规则
	// 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，
	// 在onReady生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量，
	// 是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
  onReady: function () {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    submit() {
      this.$refs.form
        .validate()
        .then((res) => {
          console.log("表单数据信息：", res);
          this.$store.commit("commitPlan", res);
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>

<style scoped>
.add_block {
  width: 100%;
  background-color: #f5f5f5;
  min-height: 1200rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.add_form {
  width: 100%;
  height: max-content;
  padding-top: 16rpx;
  font-size: 28rpx;
}

.uni-forms-item {
  color: #000;
  font-weight: 400;
}
</style>
